<template>
	<view class="me">
		<!-- 用户没有登录的状态 -->
		<view class="me-no" v-if="!isacname">
			<image src="https://tilin.gitee.io/super_hero_preview/static/icons/default-face.png" class="me-img"></image>
			<view class="me-text" @click="loginactive = true">注册/登录</view>
		</view>
		<!-- 用户登录的状态 -->
		<view class="me-no" v-else>
			<image :src="obj.avatar" class="me-img"></image>
			<view class="me-con">
				<view class="me-name">{{obj.name}}</view>
				<view class="me-id">ID:123456789</view>
			</view>
			<image src="https://tilin.gitee.io/super_hero_preview/static/icons/settings.png" class="me-sz"
				@click="use = true"></image>
		</view>

		<login v-if="loginactive" @loginstop="loginstop" @getadd="getadd"></login>
		<usercon v-if="use" @loginstop="loginstop" @signout="signout"></usercon>
		<view class="tips">超级英雄电影预告</view>
		<view class="main_nine_box">
			<view class="main_nine_box_item" v-for="(item,index) in arrtips" :key="index" @click="showmodel(item)">
				<image :src="item.img" class="main_nine_box_item_img"></image>
				<view class="main_nine_box_item_name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import login from '../../components/login.vue'
	import usercon from '../../components/usercon.vue'
	export default {
		data() {
			return {
				isacname: false,
				loginactive: false,
				use: false,
				obj: {
					name: '',
					password: '',
					avatar: 'https://tilin.gitee.io/super_hero_preview/static/icons/108x108.png'
				},
				arrtips:[
					{name:'项目简介',img:'https://tilin.gitee.io/super_hero_preview/static/icons/108x108.png',tips:'主要收集欧美地区的超级英雄电影的预告。项目使用uniapp作为主要框架结合Vue2.x进行开发，IDE使用HBuilderX，能够打包成H5、App、iOS、小程序不同类型的版本。为了方便演示，均使用本地数据。'},
					{name:'uniapp',img:'https://tilin.gitee.io/super_hero_preview/static/icons/uniapp.png',tips:'uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。'},
					{name:'Vue',img:'https://vuejs.org/images/logo.png',tips:'很方便很好用的前端框架，自认为是最强大的前端框架也是自己的主技术栈~~'},
					{name:'GitHub',img:'https://tilin.gitee.io/super_hero_preview/static/icons/github.png',tips:'没有上传到这里'},
					{name:'Gitee',img:'https://gitee.com/assets/favicon.ico',tips:'https://gitee.com/kekegitmg/hello-uni-film'},
					{name:'难点',img:'https://tilin.gitee.io/super_hero_preview/static/icons/nandian.png',tips:'①点赞动画：uni.createAnimation；②视频只能有一个播放：uni.createVideoContext，通过循环禁掉其它视频；③上拉加载（onPullDownRefresh，注意pages.json中开启enablePullDownRefresh）下拉刷新（onReachBottom）；④头像裁剪：官方代码修改（官方uniapp→pages→template→crop→crop.vue）；⑤微信登录：通过getUserInfo获取用户的code传给后端，后端使用code向小程序请求获得appid和appsecret；⑥转发给好友（button中的open-type=share、uni.share、onShareAppMessage-使用即可）、分享到朋友圈（onShareTimeline-使用即可）'},
					{name:'优化',img:'https://tilin.gitee.io/super_hero_preview/static/icons/youhua.png',tips:'①压缩图片或者把图片转化为网络地址；②涉及数据加载时加loadding；③搜索时的防抖设计；④小程序的内存很可贵，打包成小程序的代码容量最好低于1M'},
					{name:'其它&注意',img:'https://tilin.gitee.io/super_hero_preview/static/icons/zhuyi.png',tips:'①使用带有域名的数据时最好在小程序后台开发中心中加上request合法域名，当然域名是谁的都行；②打包成App时注意配置appid、appkey等；③使用https://images.weserv.nl/?url=进行豆瓣图片“缓存”'},
					{name:'完结',img:'https://tilin.gitee.io/super_hero_preview/static/icons/over.png',tips:'2021-8-12'}
					
				]
			}
		},
		components: {
			login,
			usercon
		},
		onLoad() {
			let obj = uni.getStorageSync('storage_obj')
			if (obj.name) {
				this.obj.name = obj.name
				this.obj.avatar = obj.avatar
				this.isacname = true
			}
		},
		methods: {
			//tips弹框
			showmodel(item){
				uni.showModal({
					title:item.name,
					content:item.tips,
					showCancel:false
				})
				console.log(item)
			},
			//退出账号
			signout() {
				this.obj.name = ""
				this.isacname = false
				this.use = false
			},
			//退出登录页
			loginstop(val) {
				if (val) {
					this.obj.name = val.name
					this.obj.avatar = val.avatar
				}
				this.loginactive = false
				this.use = false
			},

			//登录
			getadd(val) {
				val.avatar = "https://tilin.gitee.io/super_hero_preview/static/icons/108x108.png"
				uni.setStorageSync('storage_obj', val)
				this.obj.name = val.name
				this.obj.avatar = val.avatar
				this.obj.password = val.password
				this.isacname = true
				this.loginactive = false
			},
		}
	}
</script>

<style>
	.main_nine_box_item_img{
		width: 80rpx;
		height: 80rpx;
	}
	.main_nine_box_item_name{
		color: #666;
		font-size: 28rpx;
		padding-top: 7px;
	}
	.main_nine_box_item:nth-child(n+7){
		border-bottom: 1px solid #ccc;
	}
	.main_nine_box_item:nth-child(3n){
		border-right: 1px solid #ccc;
	}
	.main_nine_box_item{
		width: calc((100% - 10rpx) / 3);
		height: calc((100% - 10rpx) / 3);
		text-align: center;
		border: 1px solid #ccc;
		border-right: none;
		border-bottom: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.main_nine_box{
		padding: 0 30rpx;
		width: 80%;
		height: 80vw;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
	}
	.tips {
		color: #dedede;
		font-size: 60rpx;
		text-align: center;
		padding: 20px 0;
		letter-spacing: 5px;
		text-shadow: 1px 1px 4px #000;
		opacity: .32;
	}

	.me {}

	.me-sz {
		width: 50rpx;
		height: 50rpx;
	}

	.me-name {
		font-size: 38rpx;
		font-weight: 600;
		height: 60rpx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
	}

	.me-id {
		font-size: 30rpx;
		color: #7c7878;
	}

	.me-con {
		width: 65%;
		margin-left: 20rpx;
	}

	.me-img {
		width: 130rpx;
		height: 130rpx;
		margin-left: 30rpx;
		border-radius: 50%;
	}

	.me-text {
		font-size: 35rpx;
		font-weight: 600;
		margin-left: 20rpx;
	}

	.me-no {
		height: 300rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F19%2F03%2F16%2F34d95df175c91858a77a6e898e07b7f4.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630654848&t=0ab331f4a93724b32236a2cdb4fcbb49');
		background-size: 100% 100%;

	}
</style>
